<!DOCTYPE >
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
    body {
        background-image: url('https://images.unsplash.com/photo-1519681393784-d120267933ba');
        background-size: cover;
        background-position: center;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #f5f5f5;
        font-family: Arial, sans-serif;
    }

    label {
        font-size: 16px;
        font-weight: bold;
        margin-right: 10px;
    }

    input[type="text"] {
        padding: 5px;
        border-radius: 5px;
        border: 1px solid #ccc;
        outline: none;
        transition: border-color 0.2s ease-in-out;
    }
    button {
        padding: 5px 10px;
        background-color: #4CAF50;
        color: #fff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.2s ease-in-out;
    }

    button:hover {
        background-color: #3e8e41;
    }
</style>
<script type="text/javascript" src="jQuery.js"></script>
</head>
<body>
    <label for="name">用户名：</label>
    <input type="text"  id="name">
    <button onclick="btn()">测试</button>
    <span id="tip"></span>
</body>
<script>
  var inp = document.getElementById("name");
   function btn() {  
       var xhr="";//声明变量容纳XMLHttpRequest对象
        //封装XMLHttpRequest对象创建方法（用于兼容低版本IE浏览器）
        function createXHR(){
            if(new window.XMLHttpRequest){//如果浏览器支持对象XMLHttpRequest
                xhr=new XMLHttpRequest();
            }else{
                xhr=new ActiveXObject("Microsoft.XMLH");//低版本IE使用ActiveXObject
            }
        }
        createXHR();//调用函数以创建XMLHttpRequest对象
        //使用XMLHttpRequest对象发送请求
        xhr.open("get","./1.json",false);//创建请求
        xhr.send(null);//发送请求
        //获取返回的json数据，
        var personStr=xhr.responseText;//返回的数据都是字符串，不具备对象方法
        var per=JSON.parse(personStr);//使用JSON.parse方法将字符串数据转换为javascript对象
        var someper=per.user.some(function(item){
          return item.name==inp.value  
        })
        console.log(someper) ;
        if(someper==true)
          {

                  const h = '<font color="red">用户名已经被占用</font>';
                  document.getElementById('tip').innerHTML = h;
              }
              else{
                  const h = '<font color="green">用户名可用</font>';
                  document.getElementById('tip').innerHTML = h;
              }
          
        
  }
</script>
</html>
